<template>
  <div class="am-cf" v-if="count > 0">
    <div class="am-fr">
      <ul class="am-pagination tpl-pagination">
        <li ><a @click="renovate"><i class="am-icon-refresh"></i></a></li>
        <li data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 125}" ><a><i class="am-icon-download"></i></a></li>
        <li :class="{'am-disabled': p <= 1}"><a @click="goBack">«</a></li>
        <li v-for="i in c" :class="{'am-active': p === i}" @click="goNum(i)"><a>{{i}}</a></li>
        <!--<li class="am-active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>-->
        <li :class="{'am-disabled': count === p || p >= c[4]}"><a @click="goNext">»</a></li>
        <li class="am-disabled"><a>共{{count}}页，{{allCount}}条数据</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Pager',
    props: {
      allCount: {//总条数
        type: Number,
        default: 0
      },
      count: {//总页数
        type: Number,
        default: 0
      },
      page: {//第几页
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        p: 0,
        c: []
      }
    },
    watch: {
      page() {
        this.p = this.page
      },
      count(val) {
        let c = 5
        let m = []
        if (val < 5) c = val
        for (let i = 1; i <= c; i++) m.push(i)
        this.c = m
      },
      p(val) {
        let i = 1
        let c = 5
        let m = []
        if (val > 3) { i = val - 2; c = val + 2 }
        if (this.count && c >= this.count) { c = this.count; i = this.count - 4 }
        if (i <= 0) i = 1
        for (i; i <= c; i++) m.push(i)
        this.c = m
      }
    },
    mounted() {
      this.p = this.page
    },
    methods: {
      goBack() {
        this.p = this.p - 1
        this.$emit('changePage', this.p)
      },
      goNext() {
        this.p = this.p + 1
        this.$emit('changePage', this.p)
      },
      goNum(i) {
        this.p = i
        this.$emit('changePage', this.p)
      },
      renovate () {
        this.$emit('renovate', this.p)
      }
    }
  }

</script>